
<%@include file="/commons/decelerations.jsp"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List Of Roles</title>
<!-- Change CSS--------------------------------------- -->
<script type="text/javascript">
	function change_css(x) {
		var id = '#' + x;
		$(id).css('background-color', 'yellow')
	}
</script>
<!-- Change CSS--------------------------------------- -->
<!-- ADD/DELECT ROW--------------------------------------- -->
<script type="text/javascript">
	var count = 0;
	$(document).ready(function() {
		//ADD
		$('#addRow').click(	function(e) {
			count++;
			$('tbody').append(
					"<tr id =newrole"+ count +" >"
					+ "<td name='input'><input type='text' name='roleId' /></td>"
					+ "<td name='input'><input type='text' name='roleName' /></td>"
					+ "<td><input type='button' value='Delect' onclick='deleteRow(this)' /></td>"
					+ "<td><input type='button' value='Send' onclick='sendRow(this)' /></td>"+"</tr>");
		});
	});
	function deleteRow(elem) {
		  // 先抓到是哪一個 tr
		  var row = $(elem).parent().parent();
		  // 移除它
		  row.fadeOut('normal', function() {
		    row.remove();
		  });
	}
	//use Ajax send to Servlet
	function sendRow(elem){
		$(elem).parent().parent().attr('id','newRole');
		var cell = $(elem).parent().parent().children();
		var roleId = cell.children();
		var roleName = cell.next().children();
		var para = "?roleId="+roleId.val()+"&roleName=" + roleName.val()+"&webAjax=Role;";
		//alert(para);
		startRunAJAX_newRole(para);
	}
</script>
<!-- ADD/DELECT ROW--------------------------------------- -->
<!-------------------------------------------------------------------------- -->
<script type="text/javascript">
	var request_newRole = new createAJAX_newRole();
	if (request_newRole == null)
		alert("無法產生 request 物件:您不能正常使用本網頁");
	//依據不同的瀏覽器，取得 XMLHttpRequest 物件
	function createAJAX_newRole() {
		try {
			var request_newRole = new XMLHttpRequest();
			return request_newRole;
		} catch (erri) {
			try {
				var arrSignatures = [ "MSXML2.XMLHTTP.5.0",
						"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0",
						"MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
				for ( var i = 0; i < arrSignatures.length; i++) {
					try {
						var request_newRole = new ActiveXObject(arrSignatures[i]);
						return request_newRole;
					} catch (oError) {
						//ignore
					}
				}
			} catch (errii) {
				//ignore
			}
		}
	}

	/*check used*/
	function safe_tags_newRole(str) {
		return "以下為ajax傳回的 HTML 原始碼<p>"
				+ str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(
						/>/g, '&gt;');
	}
	/*change web*/
	function changeDIV_newRole() {
		if (request_newRole.readyState == 4) {
			if (request_newRole.status == 200 || request_newRole.status == 0) {
				var reqTxt = request_newRole.responseText;
				var source = safe_tags_newRole(reqTxt);
				var cell = $("#newRole").children();
				var roleId = cell.children().val();
				var roleName = cell.next().children().val();
				document.getElementById("newRole").innerHTML = 
				"<td><a href=\"<c:url value='/role/MaintainRole?roleId="+roleId+"'></c:url>\">"+roleId+"</a></td>"
				+ "<td>"+roleName+"</td>"
				+ "<td>"+"<a href=\"<c:url value='/role/DeleteRole?roleId="+roleId+"'></c:url>\">Delete</a>"+"</td>"
				+ "<td>New data</td>";
				$("#newRole").attr('id',roleId);
			} else
				alert("Sreach Error! Request status is " + request_newRole.status);
		}
	}
	/*get web to servlet*/
	function startRunAJAX_newRole(para) {
		request_newRole = new createAJAX_newRole();
		request_newRole.onreadystatechange = changeDIV_newRole;
		alert("${pageContext.request.contextPath}");
		request_newRole.open("POST", "${pageContext.request.contextPath}"+"/role/CreateRole"+para, true);
		request_newRole.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		request_newRole.send();
		//sendAllFormField_newRole();
	}
	

	function sendAllFormField_newRole() {
		var sParams = "";
		for (i = 0; i < document.newRole.length; i++) {
			var fName = document.newRole[i].name;
			var fValue = document.newRole[i].value;
				sParams = addPostParam_newRole(sParams, fName, fValue);
		}
		request_newRole.send(sParams);
		return sParams;
	}

	function addPostParam_newRole(sParams, sParamName, sParamValue) {
		if (sParams.length > 0) {
			sParams += "&";
		}
		return sParams + encodeURIComponent(sParamName) + "="
				+ encodeURIComponent(sParamValue);
	}
</script>
<!-------------------------------------------------------------------------- -->

</head>
<body>
	<c:if test='${requestScope.checkType eq "true"}'>
		<script type="text/javascript">
			alert("Delete failed, this role have person used.");
		</script>
	</c:if>
	<h1>List of Roles currently in Database</h1>
	<table id="roleListTable" border="3">
		<tr>
			<th>Role ID</th>
			<th>Role Name</th>
			<th>Do Delete</th>
			<th>CSS change</th>
			<th><input type="button" value="Add row" id="addRow" /></th>
		</tr>
		
			<c:forEach var="role" begin="0" items="${requestScope.roleList}">
				<tr id="${role.roleId}">
					<td><a href="<c:url value='/role/MaintainRole?roleId=${role.roleId}'></c:url>">${role.roleId}</a>&nbsp;&nbsp;</td>
					<td>${role.roleName}&nbsp;&nbsp;</td>
					<td><a href="<c:url value='/role/DeleteRole?roleId=${role.roleId}'></c:url>">Delete</a></td>
					<td><input type="button"
						onclick="change_css('${role.roleId}')" value="change CSS" />
				</tr>
			</c:forEach>

	</table>
	<a href="<c:url value='/role/CreateRole.jsp'></c:url>"><strong>Create a Role Record</strong></a>
	<br />
	<a href="<c:url value='/index.jsp'></c:url>">Back to Index page</a>
	
</body>
</html>